《Android 应用之路》 MPAndroidChart~PieChart

简介

MPAndroidChart是PhilJay大神给Android开发者带来的福利。MPAndroidChart是一个功能强大并且使用灵活的图表开源库，支持Android和IOS两种，这里我们暂时只关注Android版本。

Wiki

https://github.com/PhilJay/MPAndroidChart/wiki

Javadoc

https://jitpack.io/com/github/PhilJay/MPAndroidChart/v3.0.0-beta1/javadoc/

今日之图~PieChart

先看下效果压压惊，右边的图为左边的图横向拉伸后的效果
这里写图片描述

实际静态效果，上面那个是因为加了动画，录制Gif的时候不小心弄成了一直旋转的效果

这里写图片描述

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="mapdemo.example.com.mpandroidchartdemo.MainActivity">

    <com.github.mikephil.charting.charts.PieChart
        android:id="@+id/piechart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Hello World!" />
</RelativeLayout>

对于Chart,可以采用布局文件添加方式，也可以采用代码添加方式。

代码

public class MainActivity extends AppCompatActivity {
    @Bind(R.id.piechart)
    PieChart piechart;

    private Random random;//用于产生随机数字

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        random = new Random();
        initPieChart();//初始化饼图
    }

    private void initPieChart() {
        ArrayList<Entry> yVals = new ArrayList<>(); //值坐标
        ArrayList<String> xVals = new ArrayList<>();//对应的Lable,可以理解成X轴
        for (int i = 0; i < 5; i++) {
            xVals.add((i + 1) + "月");
            yVals.add(new BarEntry(random.nextInt(10000), i));
        }
        PieDataSet pieDataSet = new PieDataSet(yVals, "小明每月支出");//创建饼图的一个数据集
        pieDataSet.setColors(ColorTemplate.COLORFUL_COLORS); //设置成丰富多彩的颜色
        DisplayMetrics metrics = getResources().getDisplayMetrics();
        float px = 10 * (metrics.densityDpi / 160f);
        pieDataSet.setSelectionShift(px);  //点击后延伸出来的长度

        PieData piedata = new PieData(xVals, pieDataSet);//生成PieData

        piechart.setData(piedata);//给PieChart填充数据
        piechart.getLegend().setPosition(Legend.LegendPosition.ABOVE_CHART_LEFT);
        piechart.getLegend().setForm(Legend.LegendForm.CIRCLE);//设置注解的位置和形状
        piechart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {//设置值选择时的Listener
            @Override
            public void onValueSelected(Entry entry, int i, Highlight highlight) {
                Toast.makeText(MainActivity.this, "Something selected value = " + entry.getVal(), Toast.LENGTH_SHORT).show();//单纯地显示一个Toast
            }
            @Override
            public void onNothingSelected() {
            }
        });

        piechart.setCenterText("收支明细");//中间写的文字
        piechart.setCenterTextColor(Color.RED);//设置中间文字的颜色
        piechart.setCenterTextRadiusPercent(0.5f);//设置文字显示的角度，180横着，默认是竖着
        piechart.setCenterTextSize(12f);//设置中心文字的字体大小
        piechart.setCenterTextTypeface(null);//设置字体
        piechart.setDrawCenterText(true);//中心字使能开关，false时中间无法显示文字

        piechart.setTransparentCircleAlpha(100);//透明圈的透明度，分3圈，一个是外面的值，然后是这个，然后就是下面的那个Hole
        piechart.setTransparentCircleColor(Color.RED); //设置颜色
        piechart.setTransparentCircleRadius(50f);//设置半径

        piechart.setDrawHoleEnabled(true);//基本同上
        piechart.setHoleColor(Color.GREEN);
        piechart.setHoleRadius(30f);
        
        piechart.setDescription("No Deal");//设置描述文字
        piechart.setDescriptionTextSize(20.f);//设置描述文字的字体
        piechart.animateXY(1000, 1000);
    }
}

值选择时的事件处理
上面的例子中其实已经有了

piechart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {//设置值选择时的Listener
    @Override
    public void onValueSelected(Entry entry, int i, Highlight highlight) {
        Toast.makeText(MainActivity.this, "Something selected value = " + entry.getVal(), Toast.LENGTH_SHORT).show();//单纯地显示一个Toast
    }
    @Override
    public void onNothingSelected() {
    }
});